<template>
	<view>
		<u-navbar :back-icon-name="backIconName" :is-back="false" :background="background">
			<view class="d-flex a-center">
				<image src="../../static/images/promotion/backtrack.png.png" mode="" class="backtrack ml-2" @click="backtrack_img"></image>
				<view class="ml-2 font-32">添加现金减免</view>
			</view>		
		</u-navbar>
		<view class="m-2 mb-2 bg-white rounded-20">
			<view class="ml-3">
				<view class=" a-center  py-3 d-flex j-sb clazz">
					<view class="">活动名称</view>
					<view class="mr-3">
						<input type="text"  class="text-right" placeholder="请输入" v-model="estate_name"  placeholder-class="mr-1 d-flex j-end" @input="estate_input" />
					</view>
				</view>
			</view>
		</view>
		<view class="m-2  mb-2 bg-white rounded-20">
			<view class="ml-3">
				<view class="clazz d-flex j-sb a-center border-bottom">
					<view class="white-space">金额下限（元）</view>
					<view class="d-flex a-center j-center  mx-3">
						<input type="digit"  class="text-right" placeholder="请输入" v-model="floor_price"  placeholder-class="mr-1 d-flex j-end" @input="floor_input" />
					</view>
				</view>
				<view class="clazz  d-flex j-sb a-center">
					<view class="">立减（元）</view>
					<view class="d-flex a-center j-end mr-3 w-50">
						<input type="digit"  class="text-right" placeholder="请输入" v-model="stant_price"  placeholder-class="mr-1 d-flex j-end" @input="stant_input" />
					</view>
				</view>
			</view>
		</view>
		<view class="rounded-20 m-2 pl-3  bg-white">
			<view class="d-flex j-sb pr-3 py-3 border-bottom" @click="initiate">
				<view class="">开始时间</view>
				<view class="d-flex j-center a-center">
					<view class="text-right mr-1">{{initiate_time==!'undefined'?"请设置":initiate_time}}</view>
					<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
				</view>
			</view>
			<view class="d-flex j-sb pr-3 py-3" @click="conclude">
				<view class="">结束时间</view>
				<view class="d-flex j-center a-center">
					<view class="text-right mr-1" >{{conclude_time==!'undefined'?"请设置":conclude_time}}</view>
					<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
				</view>
			</view>		
		</view>
		
		<view class="mx-2 mb-2 bg-white rounded-20">
			<view class="ml-3">
				<view class=" a-center  py-3 d-flex j-sb clazz" @click="estate_to">
					<view class="white-space">会员等级</view>
					<view class="mr-3 d-flex">
						<view class="d-flex" v-if="estate_item" >
							<text class="ellipsis-1 mx-1" v-for="(item,index) in estate_item" :key="index">{{item.rank_name}}</text>
						</view>
						<view v-else class="ellipsis-1 mx-1">
							请设置
						</view>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="mx-2 mb-2 bg-white rounded-20">
				<view class="ml-3 a-center  py-3 d-flex j-sb clazz" :class="selected_show?'border-bottom':''" @click="discountTo">
					<view class="white-space">优惠范围 </view>
					<view class="mr-3 d-flex">
						<text class="mr-1 ellipsis-1" v-if="act_range==0">全部商品</text>
						<text class="mr-1 ellipsis-1" v-else-if="act_range==1">指定分类</text>
						<text class="mr-1 ellipsis-1" v-else-if="act_range==2">指定品牌</text>
						<text class="mr-1 ellipsis-1" v-else-if="act_range==3">指定商品</text>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
				<view v-if="selected_show" class="ml-3 a-center  py-3 d-flex j-sb clazz" @click="selectedTo">
					<view class="white-space" v-if="act_range==1">已选分类</view>
					<view class="white-space" v-else-if="act_range==2">已选品牌</view>
					<view class="white-space" v-else-if="act_range==3">已选商品</view>
					<view class="mr-3 d-flex">
						<text class="ellipsis-1 mx-1" v-if="act_range==1">已选{{count?count.length:''}}个分类</text>
						<text class="ellipsis-1 mx-1" v-else-if="act_range==2">已选{{count?count.length:''}}个品牌</text>
						<text class="ellipsis-1 mx-1" v-else-if="act_range==3">已选{{count?count.length:''}}个商品</text>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
		</view>
		
		<view class="footer"></view>
		<view class="bg-white release py-2 w-100 position-fixed bottom-0">
			<button type="warn" @click="rele">保存</button>
		</view>
		
		<!-- 返回提示 -->
		<u-popup v-model="popup_show" class="logOutPopup" mode='center' border-radius="20">
				<view class="popup_wd">
					<view class="py-5 text-center bg-white">你的信息还未保存，返回后将会丢失</view>
					<view class="d-flex  bg-light-secondary border-top">
						<view class="flex-1 py-2 text-center border-right text-danger" @click="Off">取消</view>
						<view class="flex-1 py-2 text-center text-danger" @click="Confirm">确定返回</view>
					</view>	
				</view>
		</u-popup>
		<u-toast ref="uToast" />
		<!-- 开始 -->
		<u-picker v-model="initiate_show" mode="time" @confirm="initiate_confirm"></u-picker>
		<!-- 结束 -->
		<u-picker v-model="conclude_show" mode="time" @confirm="conclude_confirm"></u-picker>
		<!-- 会员等级 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="estate_show">
			<!-- 内容 -->
			<view class="bg-white rounded-top">
				<view class="d-flex j-sb py-3 border-bottom px-4">
					<view class="text-999" @click="cancel_estate">取消</view>
					<view class="text-000 font-35">选择会员等级</view>
					<view class="text-danger" @click="next_sub">确定</view>
				</view>
				<!-- 内容 -->
				<view class="ml-2 pl-2 bg-white">
					<u-checkbox-group wrap>
						<view class="d-flex a-center checkbox" v-for="(item,index) in estate_list" :key="index">
							<u-checkbox size="45" shape="circle"
								v-model="item.checked" active-color="#F24F4A"
								>
							<view class="py-3 border-bottom  flex-1 w-100">
								{{item.rank_name}}
							</view>
							</u-checkbox>
						</view>
					</u-checkbox-group>
				</view>
			</view>
		</s-popup>
		<!-- 优惠范围弹框 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="discount_show">
			<!-- 头部 -->
			<view class="bg-white rounded-top">
				<view class="d-flex j-sb py-3 border-bottom px-4">
					<view class="text-999"></view>
					<view class="text-000 font-35">选择优惠范围</view>
					<view class="" @click="cancel_discount">
						<u-icon name="close" color="#999999" size="35"></u-icon>
					</view>
				</view>
				<!-- 内容 -->
				<view class="d-flex j-center a-center">
					<view class="content span-19 rounded-20 ml-4">
						<view class="py-3 border-bottom d-flex j-sb" @click="all_goods">
							<view class="">全部商品</view>
							<view class="mr-4">
								<u-icon name="arrow-right" color="#999999" size="35"></u-icon>
							</view>
						</view>
						<view class="py-3 border-bottom d-flex j-sb" @click="classify">
							<view class="">指定分类</view>
							<view class="mr-4">
								<u-icon name="arrow-right" color="#999999" size="35"></u-icon>
							</view>
						</view>
						<view class="py-3 border-bottom d-flex j-sb" @click="brandTo">
							<view class="">指定品牌</view>
							<view class="mr-4">
								<u-icon name="arrow-right" color="#999999" size="35"></u-icon>
							</view>
						</view>
						<view class="py-3 border-bottom d-flex j-sb" @click="goodsTo">
							<view class="">指定商品</view>
							<view class="mr-4">
								<u-icon name="arrow-right" color="#999999" size="35"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</s-popup>
	</view>
</template>

<script>
	import sPopup from '../../components/s-popup/index.vue';
	export default {
		components: {
				sPopup
		},
		data() {
			return {
				background: {
					backgroundColor: '#ffffff',
				},
				estate_name:"", // 活动名称
				floor_price:"", // 进入下限
				stant_price:"", // 立减
				initiate_show:false,// 开始 开关
				initiate_time:"", // 开始时间
				conclude_show:false, // 结束开关
				conclude_time:"", // 结束时间
				popup_show:false,
				user_rank:"", // 会员等级ID
				discount_show:false, // 优惠范围 弹框
				
				brand_item:"", // 指定品牌
				pro_detail:"", // 指定商品
				
				estate_list:"", // 会员等级列表
				estate_show:false, // 会员弹框
				
				selected_show:false,
				
				estate_item:"", // 会员等级
				count:"", // 指定分类 
				
				act_range:0, // 优惠活动范围类型
			}
		},
		
		methods: {
			// 提示
			showToast(e) {
				this.$refs.uToast.show({
					title: e,
					type: 'default',
				})
			},
			classify(){
				this.discount_show=false
				uni.navigateTo({
					url:'/pagesA/cash/cash-classify'
				})
			},
			
			// 活动名称
			estate_input(e){
				this.estate_name=e.detail.value
			},
			// 进入下限
			floor_input(e){
				this.floor_price=e.detail.value
			},
			// 立减
			stant_input(e){
				this.stant_price=e.detail.value
			},
			// 开始时间
			initiate(){
				this.initiate_show=true
			},
			// 结束时间
			conclude(){
				this.conclude_show=true
			},
			// 开始
			initiate_confirm(e){
				let time=`${e.year}-${e.month}-${e.day}`;
				if(new Date(time).getTime()>=new Date(this.conclude_time).getTime()){
					this.$refs.uToast.show({
						title: '开始日期不能晚于结束日期',
						type: 'default',
						duration:1000,
					})
				}else{
					this.initiate_time=time
				}
			},
			// 结束
			conclude_confirm(e){
				let time=`${e.year}-${e.month}-${e.day}`;
				if(new Date(time).getTime()<=new Date(this.initiate_time).getTime()){
					this.$refs.uToast.show({
						title: '结束日期不能早于开始日期',
						type: 'default',
						duration:1000,
					})
				}else{
					this.conclude_time=time
				}
			},
			// 会员等级
			estate_to(){
				this.estate_show=true
			},
			// 优惠范围
			discountTo(){
				this.discount_show=true
			},
			cancel_discount(){
				this.discount_show=false
			},
			// 已选分类
			selectedTo(){
				if(this.act_range==1){
					uni.navigateTo({
						url:'/pagesA/cash/cash-classify-selected?classify_add='+'分类'
					})
				}else if(this.act_range==2){
					uni.navigateTo({
						url:'/pagesA/cash/cash-brand-selected?brand_add='+'品牌'
					})
				}else if(this.act_range==3){
					uni.navigateTo({
						url:'/pagesA/cash/cash-goods-selected?goods='+'商品'
					})
				}
			},
			// 保存
			rele(){
				let act_range_ext=[]
				if(this.act_range==1||this.act_range==2){
					this.count.filter(v=>{
						act_range_ext.push(v.cat_id||v.brand_id)
					})
				}else if(this.act_range==3){
					this.count.filter(v=>{
						act_range_ext.push(v.goods_id)
					})
				}
				console.log(act_range_ext)
				if(this.estate_name==''){
					this.showToast("请填写活动名称")
				}else if(this.floor_price==''){
					this.showToast("请填写金额下限")
				}else if(this.stant_price==''){
					this.showToast("请填写立减金额")
				}else if(this.initiate_time==''){
					this.showToast("请填写开始时间")
				}else if(this.conclude_time==''){
					this.showToast("请填写结束时间")
				}else if(this.user_rank==''){
					this.showToast("请选择会员等级")
				}else{
					this.$H.post("admin/favourable/add",{
						act_type:1,
						act_name:this.estate_name,
						start_time:this.initiate_time,
						end_time:this.conclude_time,
						user_rank:this.user_rank.toString(),
						act_range:this.act_range,
						act_range_ext:act_range_ext.toString(),
						act_type_ext:this.stant_price,
						min_amount:this.floor_price,
					}).then(res=>{
						this.$refs.uToast.show({
							title: "添加活动成功",
							type: 'success',
							back: true
						})
					})
				}
			},
			
			// 全部商品
			all_goods(){
				this.discount_show=false
				this.count=""
				
				this.selected_show=false
				this.act_range=0
				console.log(this.act_range)
			},
			// 取消
			cancelMore(){
				this.discount_show=false
			},
			// 指定品牌
			brandTo(){
				this.discount_show=false
				uni.navigateTo({
					url:'/pagesA/cash/cash-brand'
				})
			},
			// 指定商品
			goodsTo(){
				this.discount_show=false
				uni.navigateTo({
					url:"/pagesA/cash/cash-goods"
				})
			},
			// 会员确定
			next_sub(){
				let arr=[]
				this.estate_item=this.estate_list.filter(v=>{
					if(v.checked){
						arr.push(v.rank_id)
						return v
					}
				})
				console.log(this.estate_item)
				this.user_rank=arr
				this.estate_show=false
			},
			// 取消
			cancel_estate(){
				this.estate_show=false
			},
			
			// 返回
			backtrack_img(){
				this.popup_show=true
			},
			// 返回
			Confirm(){
				uni.navigateBack({
					delta:1
				})
			},
			// 取消弹框
			Off(){
				this.popup_show=false
			}
		},
		onLoad() {
			this.subCatId=1
			this.$H.post("admin/merchant/goods/category").then(res=>{
				this.terraceClazz=res.data
				this.terraceClazz.filter(v=>{
						return v.icon_show=false
				})
				// 一级
				this.oneClazz=this.terraceClazz.filter((item,index)=>{
					if(item.parent_id==0){
						return item
					}
				})
			})
			
			this.$H.post("admin/user/rank").then(res=>{
				this.estate_list=res.data
				this.estate_list=res.data.map(v=>{
					return {
						...v,
						checked:false
					}
				})
				console.log(this.estate_list)
			})
		},
		onShow() {
			var globalData = getApp().globalData.act_range;
			this.act_range=globalData
			
			if(this.act_range==1){
				this.count=JSON.parse(uni.getStorageSync("cash_classify"))
			}else if(this.act_range==2){
				this.count=JSON.parse(uni.getStorageSync("cash_brand"))
			}else if(this.act_range==3){
				this.count=JSON.parse(uni.getStorageSync("cash_goods"))
			}
			var globalData = getApp().globalData.selected;
			this.selected_show= globalData;
		},
		onUnload() {
			uni.removeStorageSync("cash_classify")
			uni.removeStorageSync("cash_brand")
			uni.removeStorageSync("cash_goods")
			var globalData = getApp().globalData.act_range;
			getApp().globalData.act_range=""
			var globalData = getApp().globalData.selected;
			getApp().globalData.selected=false
		}
	}
</script>

<style>
	.release /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.logOutPopup /deep/ .popup_wd{
		width: 600upx;
	}
	.s-popup-mask{
		background: rgba(0,0,0,0.2)!important;
	}
	.content{
		background-color:rgba(255,255,255,0.96)!important;
		color: #666666;
	}
	.s-popup-wrap{
		background: rgba(204,204,204,0)!important;
	}
	.icon_share view{
		color: #888;
	}
	
	u-checkbox{
		width: 100%;
	}
	.u-checkbox__label{
		width: 100%;
		margin-right: 0rpx!important;
	}
</style>
